<template>
    <div class="notfound">
        <p>{{title}}</p>
        <p>页面跑丢了！</p>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue'

interface Model{
    title: number | string;
}
export default {
    name:'notfound',
    setup(){
        const data: Model = reactive({
            title:404
        })

        const datas = toRefs(data);

        return{
            ...datas
        }
    }
}
</script>
<style lang="scss" scoped>
    .notfound{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &>p:nth-of-type(1){
            font-size: 100px;   
            font-weight: 600;
        }
        &>p:nth-of-type(2){
            font-size: 50px;   
            font-weight: 600;
        }
    }
</style>